<template>
  <div class="container-item-info-order">
    <div class="item-price">¥ {{ value.goods_total | saveNum }}</div>
    <div class="item-freight">+ ¥ {{ value.freight | saveNum }}</div>
    <div class="item-total">¥ {{ price_total | saveNum }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default() {
        const obj = { goods_total: 0, freight: 0 }
        return obj
      }
    }
  },
  computed: {
    price_total() {
      return Number(this.value.goods_total) + Number(this.value.freight)
    }
  }
}
</script>

<style lang="less">
.container-item-info-order {
  padding-top: 10px;
  border-top: 1px solid #ddd;
  > div {
    margin-bottom: 10px;
    font-size: 14px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .item {
    &-price {
      display: flex;
      justify-content: space-between;
      &::before {
        content: "商品金额";
      }
    }
    &-freight {
      display: flex;
      justify-content: space-between;
      &::before {
        content: "运费";
      }
    }
    &-total {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #ddd;
      font-size: 16px;
      font-weight: bold;
      color: #d63a54;
      &::before {
        content: "合计";
        font-weight: normal;
        color: #999;
      }
    }
  }
}
</style>
